const webpack = require('webpack');
const { rootPath, ENV } = require('../utils');
const manifest = require(rootPath('src/assets/dll/vendor.dll.manifest.json'))

/*
** 插件：HtmlWebpackPlugin
** 简介：简单创建 HTML 文件，用于服务器访问
** 文档： https://github.com/jantimon/html-webpack-plugin#configuration
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    filename: 'index.html',
    template: rootPath('public/index.html'),
    favicon: rootPath('public/favicon.ico'),
})

/*
** 插件：HardSourceWebpackPlugin
** 简介：为模块提供中间缓存步骤
** 文档：https://blog.csdn.net/mnhn456/article/details/82757834
*/
// const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
// const hardSourceWebpackPlugin = new HardSourceWebpackPlugin()
// 配置全局常量
const definePlugin = new webpack.DefinePlugin({
    ENV: JSON.stringify(ENV), // 当前运行环境
})

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const friendlyErrorsWebpackPlugin = new FriendlyErrorsWebpackPlugin();

/*
** 插件：DllReferencePlugin
** 简介：把生成的dll文件引用到需要的预编译的依赖上来
** 文档： https://webpack.js.org/plugins/dll-plugin/#dllreferenceplugin
*/
const dllReferencePlugin =  new webpack.DllReferencePlugin({
    manifest
})

/*
** 插件：AddAssetHtmlPlugin
** 简介：把文件添加到模板里面
** 文档： https://www.npmjs.com/package/copy-webpack-plugin
*/
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const addAssetHtmlPlugin = new AddAssetHtmlPlugin({ 
    filepath: rootPath('src/assets/dll/*.js')
})

/*
** 对象：resolve.alias
** 简介：创建 import 或 require 的别名，来确保模块引入变得更简单
** 文档：https://www.webpackjs.com/configuration/resolve/
*/
const alias = {
    '@/': rootPath('src'),
    '@/pages': rootPath('src/pages'),
    '@/components': rootPath('src/components'),
    '@/router': rootPath('src/router'),
    '@/stores': rootPath('src/stores'),
    '@/utils': rootPath('src/utils'),
    '@/assets': rootPath('src/assets'),
    '@/services': rootPath('src/services'),
    '@/config': rootPath('src/config'),
}

/*
** 对象：module.rules
** 简介：创建模块时，匹配请求的规则数组
** 文档：https://www.webpackjs.com/configuration/module/#module-rules
*/
const rules = [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.(scss|css)$/,
        exclude: /node_modules/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    modules: {
                        localIdentName: '[local]__[hash:base64:5]'
                    },

                }
            },
            /*  {
                 loader: 'postcss-loader',
                 options: {
                     ident: 'postcss',
                     plugins: (loader) => [
                         require('postcss-cssnext')(),
                     ]
                 }
             }, */
            'sass-loader'
        ]
    },
    {
        // 处理antd样式
        test: /\.css$/,
        exclude: /src/,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 1
                }
            },
        ]
    },
    {
        test: /\.(png|jpg|gif|jpeg|svg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:5].[ext]',
                    limit: 2000,
                    outputPath: 'images',
                    esModule: false,
                    // publicPath: './'
                }
            }
        ]
    },
    {
        test: /\.(woff|ttf|eot)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:5].[ext]',
                    limit: 2000,
                }
            }
        ]
    }
]

/*
** 对象：optimization.splitChunks.cacheGroups
** 简介：设置缓存组 缓存公共代码
** 文档：https://blog.csdn.net/MNAHZ/article/details/95979462
*/
const optimization = {
    splitChunks: {  //分割代码块
        cacheGroups: {  //缓存组 缓存公共代码
            commons: {  //公共模块 
                name: 'chunk-comomns',
                test: rootPath('src/components'),
                minChunks: 2,    //代码复 2 次以上的抽离
                priority: 5,
                reuseExistingChunk: true
            },
            libs: {
                name: 'chunk-libs',
                test: /node_modules/,
                priority: 10,
                chunks: 'initial' // 只打包初始时依赖的第三方
            },
        }
    }
};

module.exports = {
    entry: {
        app: [rootPath('src/index.js')]
    },
    output: {
        filename: '[name].[hash:5].js',
        path: rootPath('dist'),
        publicPath: '/'
    },
    module: {
        rules
    },
    resolve: {
        alias
    },
    optimization,
    plugins: [
        htmlWebpackPlugin, 
        definePlugin, 
        friendlyErrorsWebpackPlugin,
        dllReferencePlugin,
        addAssetHtmlPlugin
    ],
}